<!--
 * @Author: chunlai
 * @Date: 2023-12-13 14:36:23
 * @LastEditTime: 2025-11-20 11:23:21
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\form\components\premcount\SpanTwoRadio.vue
 * @Description: 投保/不投保
-->
<template>
  <div class="single_radios_box">
    <span class="single_radios_span bg-col" v-if="isMust">投保</span>
    <template v-else>
      <span
        class="single_radios_span"
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'bg-col': curVal == item.value }"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </span>
    </template>
  </div>
</template>

<script>
export default {
  name: "SpanTwoRadio",
  props: {
    curVal: {
      type: [String, Number, Boolean],
      default: "",
    },
    indx: {
      type: [String, Number],
      default: () => 0,
    },
    isMust: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [
        {
          label: "投保",
          value: true,
        },
        {
          label: "不投保",
          value: false,
        },
      ],
    };
  },
  methods: {
    handleClick(ele) {
      this.$emit("change", ele.value, this.indx);
    },
  },
};
</script>

<style lang="less" scoped>
.single_radios_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;

  .single_radios_span {
    min-width: 64px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    color: #747474;
    background-color: #f7f7f7;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0;
    margin-left: 6px;
    margin-top: 0;

    &.bg-col {
      color: #f54040;
      background-color: #fff0f0;
      position: relative;
      &::after {
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: inherit;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 1px solid #f54040;
      }
    }
  }
}
</style>
